<template>
  <a-modal
    :title="'绑定上下级'"
    :visible="true"
    width="750px"
    :footer="null"
    @cancel="reset"
  >
    <div class="main">
      <a-card>
        <div style="display:flex;justify-content: center;margin-bottom: 20px;">
          <a-form
            layout="inline"
            :form="form"
            @submit="handleSubmit"
          >
            <a-form-item label="数据字典">
              <a-select
                show-search
                style="width: 180px"
                placeholder="请选择数据字典"
                v-model="parent"
                @change="loadChild"
                allow-clear
              >
                <a-select-option
                  :value="item.name"
                  v-for="(item,index) in parentList"
                  :key="index"
                >
                  {{ item.description }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item>
            </a-form-item>
          </a-form>
        </div>
        <div style="display:flex;justify-content: center;">
          <a-transfer
            :data-source="childList"
            :titles="['数据字典', '已选择']"
            :target-keys="targetKeys"
            :list-style="{
      width: '300px',
      height: '400px',
    }"
            :render="item => item.title"
            @change="handleChange"
          />
        </div>
      </a-card>
    </div>
    <a-row style="margin-top: 10px;">
      <a-col
        :span="16"
        :offset="8"
        class="info-action"
      >
        <a-button
          type="primary"
          class="ml-20"
          @click="submit"
        >保存</a-button>
      </a-col>
    </a-row>
  </a-modal>
</template>

<script>
import { getDictList, saveDictRelation, getDictChildList } from '@api/rd/index'

export default {
  components: {},

  props: {
    dictItem: {
      type: Object,
      default: null
    },
    firstId: {
      type: Number,
      default: null
    },
    parentDictId: {
      type: Number,
      default: null
    },
  },

  data() {
    return {
      id: '',
      parentList: [],
      childList: [],
      dictDetailId: [],
      parent: undefined,
      parentId: '',
      dictId: '',
      name: '',
      form: this.$form.createForm(this),
      selectedKeys: [],
      targetKeys: [],
      backList: []
    }
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo || null
    }
  },
  created() {
    const { dictItem } = this.$props
    console.log(dictItem)
    if (dictItem) {
      this.parentId = dictItem.dictId
      this.name = dictItem.dictName
      this.backList = dictItem.dictRelationDetail
    }
    this.loadData()
  },
  methods: {
    handleChange(targetKeys, direction, moveKeys) {
      this.targetKeys = targetKeys
      console.log(this.targetKeys)
      this.dictDetailId = this.targetKeys
    },
    reset() {
      this.parent = undefined
      this.$emit('closeChild')
    },
    handleSubmit(e) {
      e.preventDefault()
      this.loadChild()
    },
    async loadChild() {
      const params = {
        current: 1,
        name: this.parent
      }
      try {
        const res = await getDictChildList('dict', params)
        if (res.code == 200) {
          this.childList = res.data
          this.childList.map(item => {
            item.key = item.id.toString()
            item.title = item.name
            item.value = item.id
            item.disabled = false
          })
          if (this.backList.length) {
            this.backList.map(item => {
              this.targetKeys.push(item.id.toString())
            })
            this.$nextTick(() => {
              this.dictDetailId = this.targetKeys
            })
          }
          console.log(this.childList);
          console.log(this.targetKeys)
        } else {
          this.$message.error(res.msg)
        }
      } catch (error) {
        this.$message.error('获取数据字典子项列表失败！')
      } finally {
        this.loadingChild = false
      }
    },
    async loadData() {
      const params = {
        current: 1,
        size: 100
      }
      try {
        const res = await getDictList('dict', params)
        if (res.code == 200) {
          this.parentList = res.data.records
          this.parentList.map(item => {
            if (this.parentId == item.id && this.parentId) {
              this.parent = item.name
            }
          })
          if (this.dictItem) {
            // this.loadDetail()
            this.loadChild()
          }
        } else {
          this.$message.error(res.msg)
        }
      } catch (error) {
        this.$message.error('获取数据字典列表失败！')
      }
    },
    async submit() {
      var params = {}
      let dictId = ''
      this.parentList.map(item => {
        if (item.name == this.parent) {
          dictId = item.id
        }
      })
      const { realname } = this.userInfo
      params.operator = realname
      params.dictDetailId = this.dictDetailId
      params.parentDictDetailId = this.firstId
      params.parentDictId = this.parentDictId
      params.dictId = dictId
      // console.log(params)
      try {
        const res = await saveDictRelation('dict', params)
        if (res.code == 200) {
          this.$message.success('绑定上下级关系成功!')
          this.reset()
        } else {
          this.$message.warning(res.msg)
        }
      } catch (error) {
        this.$message.warning('操作失败！')
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped lang="less">
.info-action {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  // margin-bottom: 20px;
}

.ml-20 {
  margin-left: 20px;
}
</style>
